<template>
  <div id="myMood">
    <div class="post-mood">
      <textarea rows="9" cols="70" class="inputMood" id="t" placeholder="这里输入当下心情"></textarea>
      <br>
      <button class="send-mood">发 表</button>
    </div>

    <br><br>
    <br>
    <div class="myMood-main">
      <hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />
      <div id="mood-title">
        <h3>我的心情</h3>
      </div>
      <div class="myMood-list">
        <ul>
          <li>
            <div class="one-mood" v-for="item in mood" :key="item.id">
              <div class="mood-content">
                <span class="mood-word">{{item.content}}</span>
                <span class="mood-time">{{item.publisherId.logTime}}</span>
              </div>
              <div class="mood-comment" v-if="commentOfMood==item.id" v-for="comm in comment" :key="comm.id">
                <span class="comm-name">{{comm.reviewerId.nickname}}：</span>
                <span class="comm-word">{{comm.content}}</span>
                <button class="comm-reply" @click="moodReply()">回复</button>
              </div>
              <div class="mood-button">
                <button class="button-comm" @click="moodComm()">评论</button>
                <button class="button-comm" @click="getComment(item.id)">查看</button>
                <button class="button-del" @click="moodDel('mood-1')">删除</button>
              </div>
            </div>
          </li>
        </ul>

      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'myMood',
    data(){
      return{
        mood: [],
        comment: [],
        commentOfMood:'',
      }
    },

    methods: {
      moodDel(id){
        this.$confirm('永久删除该心情, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var mood=document.getElementById(id);
          mood.parentNode.removeChild(mood);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      moodComm() {
        this.$prompt('请输入评论', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你已评论成功 '
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      moodReply() {
        this.$prompt('请输入回复', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你已回复成功 '
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      getMoods(url,id){
        this.$http({
          method: 'get',
          url: 'mood/listMyMood',
        }).then((response)=>{
          response = response.data;
          if(response.status == 'SUCCESS'){
              this.mood = response.object.objects;
          }else{
            this.$message({
              type:'error',
              message:response.message,
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:response.message,
          });
        });
      },
      comment(target_id) {
        this.$http({
          method: 'post',
          url: 'comment/addComment',
          data: 
          {
            "type": 0,
            "content": this.commentContent,
            "target_id": target_id
          }
        }).then((response)=>{
          if(response && response.data.status == 'SUCCESS') {
            this.getComment(target_id)
          }
        }).catch((err)=>{
        })  
      },
      getComment(target_id) {
        this.isComment = !this.isComment;
        this.isloading = true;
        this.$http({
          method: 'get',
          url: 'comment/getComment',
          params: {
              "target_id": target_id
          }             
        }).then((response)=>{
          if(response && response.data.status == 'SUCCESS') {
            this.comment = response.data.object.objects;
            this.isloading = false;
            this.commentOfMood = target_id;
          }
        }).catch((err)=>{  
        })
      },
    },
    created: function (argument) {
      this.getMoods();
    },
  }
</script>

<style>
  #myMood {
    width: 800px;
    height: 100%;
    background-color: #FAEBD7;
    padding: 10px;
  }
  div.post-mood{
    text-align: center;
    width: 600px;
    height: 180px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    background-color: #ffffff;
    padding-top: 20px;
  }
  .myMood-main{
    width: 600px;
    margin-right: auto;
    margin-left: auto;
  }
  button.send-mood{
    display: block;
    font-size: 14px;
    background-color: #F08080;
    color: #ffffff;
    padding: 8px,40px;
    width: 80px;
    height: 25px;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    float: left;
  }
  button.send-mood{
    position: relative;
    left: 75%;
  }
  ul{
    list-style-type: none;
  }
  .mood-time{
    float: right;
    margin-right: 20px;
    color: #A9A9A9;
    font-size: 12px;
  }
  
  .one-mood{
    background-color: #ffffff;
    padding: 20px;
  }
  div.mood-comment{
    background-color: #f5f5f5;
    padding: 5px;
  }
  .button-comm,.button-del{
    float: right;
    border: none;
    color: #00008B;
    background-color: #ffffff;
  }
  div.mood-comment span{
    position: relative;
    left: -15px;
    padding: 5px;
    font-size: 12px;
  }
  div.mood-comment span{
    padding: 2px;
    position: relative;
    left: 2px;
  }
  .comm-name{
    color: #00008B;
  }
  .mood-content{
    margin-bottom: 5px;
    font-size: 15px;
  }
  .myMood-list ul{
    position: relative;
    left: -30px;
  }
  #mood-title h3{
    padding-left : 7px;
    padding-top: 5px;
    font-size: 18px;
  }
  .comm-reply{
    float: right;
    font-size: 12px;
    position: relative;
    left: 0px;
  }

</style>